<template>
  <div class="analytics-page">
    <!-- 页面头部 -->
    <div class="header-bar">
      <h1 class="page-title">统计分析</h1>
<!--      <button class="btn btn-primary" @click="isReportModalOpen = true">-->
<!--        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">-->
<!--          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>-->
<!--          <polyline points="14 2 14 8 20 8"></polyline>-->
<!--          <line x1="16" y1="13" x2="8" y2="13"></line>-->
<!--          <line x1="16" y1="17" x2="8" y2="17"></line>-->
<!--          <polyline points="10 9 9 9 8 9"></polyline>-->
<!--        </svg>-->
<!--&lt;!&ndash;        <span>导出报表</span>&ndash;&gt;-->
<!--      </button>-->
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <StatCard
        v-for="stat in statsData"
        :key="stat.title"
        :icon="stat.icon"
        :icon-bg-color="stat.iconBgColor"
        :title="stat.title"
        :value="stat.value"
        :comparison="stat.comparison"
        :chart-data="stat.chartData"
      />
    </div>

    <!-- 导出报表模态框 -->
    <ReportModal
      v-if="isReportModalOpen"
      @close="isReportModalOpen = false"
      :reportData="statsData"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import StatCard from './StatCard.vue';
import ReportModal from './ReportModal.vue';
import api from '@/utils/axios.js';

const isReportModalOpen = ref(false);
const API_BASE_URL = 'http://localhost:8080/api/auth';

const statsData = ref<any[]>([]);

onMounted(async () => {
  // 获取警员数据
  const officers = (await api.get(`${API_BASE_URL}/officers`)).data?.data || [];
  const officerCount = officers.length;
  const comparison1 = { isUp: true, text: '5%' }; // 可换成真实计算值

  // 获取排班数据
  const shifts = (await api.get(`${API_BASE_URL}/shifts`)).data || [];
  let totalDuration = 0;
  let count = 0;
  shifts.forEach(s => {
    const start = new Date(`${s.date}T${s.startTime}`);
    const end = new Date(`${s.date}T${s.endTime}`);
    const duration = (end.getTime() - start.getTime()) / (1000 * 60 * 60);
    if (!isNaN(duration)) {
      totalDuration += duration;
      count++;
    }
  });
  const avgDuration = count ? (totalDuration / count).toFixed(1) : '0';

  // 获取巡逻点出勤数据
  const points = (await api.get('/patrol/points')).data.data || [];
  const attendanceCount = points.filter(p => p.status === 1).length;

  statsData.value = [
    {
      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" fill="currentColor"/></svg>`,
      iconBgColor: '#6f42c1',
      title: '在职警员数量',
      value: `${officerCount}`,
      comparison: comparison1
    },
    {
      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8zm.5-13H11v6l5.25 3.15l.75-1.23l-4.5-2.67z" fill="currentColor"/></svg>`,
      iconBgColor: '#0dcaf0',
      title: '平均巡逻时长',
      value: `${avgDuration}小时`,
      comparison: { isUp: true, text: '0.3小时' }
    },
    {
      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" fill="currentColor"/></svg>`,
      iconBgColor: '#ffc107',
      title: '本月出勤次数',
      value: attendanceCount.toLocaleString(),
      comparison: { isUp: true, text: '8%' }
    }
  ];
});
</script>

<style scoped>
@import "@/assets/styles/views/admin/Analytics.css";
</style>
